<!--
富文本
https://www.wangeditor.com/v5
-->
<template>
  <div class="editor" :style="{ borderColor: border }">
    <Toolbar
      class="toolbar"
      :style="{ borderColor: border }"
      :editor="editorRef"
      :default-config="toolbarConfig"
      :mode="'default'"
    />
    <Editor
      v-model="valueHtml"
      style="overflow-y: auto"
      :style="{
        height: height + 'px',
      }"
      :default-config="editorConfig"
      :mode="'default'"
      @onCreated="handleCreated"
      @onChange="handleChange"
      @onDestroyed="handleDestroyed"
      @onFocus="handleFocus"
      @onBlur="handleBlur"
      @customAlert="customAlert"
      @customPaste="customPaste"
    />
  </div>
</template>

<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 styles
import { withDefaults, defineProps, defineEmits } from 'vue'
const emit = defineEmits<{
  (name: 'update:value', value: string): void
  (name: 'change', value: string): void
}>()
interface EditorProps {
  // 默认内容
  value: string
  // 默认高度
  height: number
  // 边框颜色
  border: string
  // 是否禁用
  disabled: boolean
}
const props = withDefaults(defineProps<EditorProps>(), {
  value: '请输入内容...',
  height: 500,
  border: '#ccc',
  disabled: true,
})
import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { IEditorConfig } from '@wangeditor/editor'
import { uploadConfig } from '@/components/base/base-editor/editor-config'

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('')
// 工具栏配置
const toolbarConfig = {}
// 编辑器配置
const editorConfig: Partial<IEditorConfig> = {
  MENU_CONF: {
    uploadImage: uploadConfig('image'),
    uploadVideo: uploadConfig('video'),
  },
  placeholder: '请输入内容...',
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

/**
 * 组件创建
 * @param editor
 */
const handleCreated = (editor: any) => {
  editorRef.value = editor
  // 文本内容初始化
  editorRef.value.setHtml(props.value)
}
/**
 * 编辑器改变
 * @param editor
 */
const handleChange = (editor: any) => {
  emit('update:value', editor.getHtml())
  emit('change', editor.getHtml())
}
/**
 * 编辑器销毁
 * @param editor
 */
const handleDestroyed = (editor: any) => {}
/**
 * 编辑器聚焦
 * @param editor
 */
const handleFocus = (editor: any) => {}
/**
 * 编辑器失焦
 * @param editor
 */
const handleBlur = (editor: any) => {}
/**
 * 提示信息
 * @param info
 * @param type
 */
const customAlert = (info: any, type: any) => {}
/**
 * 粘贴操作
 * @param editor
 * @param event
 * @param callback
 */
const customPaste = (
  editor: { insertText: (arg0: string) => void },
  event: { preventDefault: () => void },
  callback: (arg0: boolean) => void,
) => {
  // console.log('ClipboardEvent 粘贴事件对象', event)
  // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
  // const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
  // const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
  // 自定义插入内容
  // editor.insertText('xxx')
  // 返回 false ，阻止默认粘贴行为
  // event.preventDefault()
  // callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）
  // 返回 true ，继续默认的粘贴行为
  callback(true)
}
watch(props, () => {
  if (editorRef.value) {
    valueHtml.value = props.value
    props.disabled ? editorRef.value.disable() : editorRef.value.enable()
    const dom = document.getElementsByClassName('w-e-text-container')
    if (dom[0]) {
      const element = dom[0] as any
      element.style.background = props.disabled ? '#f5f5f5' : 'white'
    }
  }
})
</script>

<style scoped lang="scss">
.editor {
  z-index: 99999;
  border-width: 1px;
  border-style: solid;
  .toolbar {
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
}
</style>
